import {useNavigate,useLocation} from 'react-router-dom'
import { Form, Button, Input,Col, Avatar,message } from 'antd'
import './Handleorg.scss'
import {patchOrg} from '../../../../api/Datas'
import { useEffect } from 'react'
interface Props {

}

function Handleorg(props: Props) {
    // 调用Form的钩子函数useForm()
    const [form] = Form.useForm()
    const { TextArea } = Input;
    const [messageApi, contextHolder] = message.useMessage()
    const navigate = useNavigate()
   var location = useLocation()
    
    // 初始化挂载期
    useEffect(()=>{
        console.log(location.state)
        form.setFieldsValue(location.state)
    },[])
    // 提交表单
    const onFinish = async(values: any) => {
        patchOrg({...values,mechanismState:location.state.mechanismState,mechanismPicture:'https://cdn7.axureshop.com/demo/1881228/images/%E6%9C%BA%E6%9E%84%E7%AE%A1%E7%90%86/u5251.png'}).then(res=>{
            console.log(res);
            if(res.data.code == 200){
                message.success({content:'修改成功'})
                  setTimeout(()=>{
                    navigate(-1)
                  },1000)
            }
        })
        
    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      };
    return (
        <div className='handleorg'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>编辑机构信息</h3>
            </div>
            <h4>机构信息</h4>
            <Form
                {...layout}
                form={form}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="机构编号"
                        name="mechanismId"
                    >
                        {location.state.mechanismId}
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="机构名称"
                        name="mechanismName"
                        rules={[{ required:true,message: '请填写机构名称' }]}
                    >
                        <Input placeholder='请输入'/>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="机构图片"
                        name="mechanismPicture"
                        rules={[{ message: '请选择机构图片' }]}
                    >
                        <div className="avatorbox">
                            <Avatar src={location.state.mechanismPicture} />
                            {/* <a >+点击上传</a> */}
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="负责人姓名"
                        name="mechanismChargename"
                        rules={[{ message: '请填写负责人姓名' }]}
                    >
                        <Input placeholder='请输入'/>
                    </Form.Item>
                </Col>
                    <Col span={8}>
                    <Form.Item
                        label="联系电话"
                        name="mechanismTelephone"
                        rules={[{ message: '请输入联系电话' }]}
                    >
                        <Input placeholder='请输入'/>
                    </Form.Item>
                    </Col>
                    <Col span={8}></Col>
                    <Col span={8}>
                        <Form.Item
                            label="机构地址"
                            name="mechanismAddress"
                            rules={[{ required:true,message: '请填写机构地址' }]}
                        >
                            <Input placeholder='请输入'/>
                        </Form.Item>
                    </Col>
                    <Col span={16}></Col>
                    <Col span={8}>
                        <Form.Item
                            label="机构介绍"
                            name="mechanismIntroduce"
                            rules={[{ message: '请填写机构介绍' }]}
                        >
                            <TextArea rows={4} placeholder='请输入'/>
                        </Form.Item>
                    </Col>
                    <Col span={16}></Col>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            保存
                        </Button>
                    </Form.Item>
            </Form>
            {contextHolder}
        </div>
    );
}

export default Handleorg;